<template>
    <div>
        <a-card class="searchForm mb-twelve">
            <a-form-model :model="searchForm" layout="inline" :colon="false">
                <a-form-model-item label="用户姓名" prop="userName">
                    <a-input style="color: #000" v-model="searchForm.userName" placeholder="请输入用户姓名" />
                </a-form-model-item>
                <a-form-model-item label="所属组织" prop="organization">
                    <a-select v-model="form.organization" placeholder="请选择" allowClear style="width:180px">
                        <a-select-option v-for="(item, index) in 2" :value="item" :key="index">
                            {{ item }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="所属角色" prop="role">
                    <a-select v-model="form.role" placeholder="请选择" allowClear style="width:180px">
                        <a-select-option v-for="(item, index) in 2" :value="item" :key="index">
                            {{ item }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
              <a-form-model-item>
                <a-button @click="search" type="primary">查询</a-button>
                <a-button @click="reset" class="btn-reset">重置</a-button>
              </a-form-model-item>
            </a-form-model>
        </a-card>
        <a-card>
            <div class="flex align-center justify-between flex-wrap card-hr">
                <div class="a-card-title">用户列表</div>
                <div>
                    <a-button @click="handleOpen('')" type="primary" style="margin-left: 8px;">添加</a-button>
                </div>
            </div>
            <div class="mb-sixteen">
                <a-table bordered :rowKey="(record, index) => {
                return index;
            }
                " :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                    :data-source="list" :pagination="false" :scroll="{ x: '100%' }">
                  <template slot="status"  slot-scope="text,record">
                    <div>{{record.status==0?'禁用':'启用'}}</div>
                  </template>
                    <template slot="action" slot-scope="text,record">
                        <a-button @click="resetPass(record)" type="link"> 重置密码 </a-button>
                        <a-button @click="handleOpen(record)" type="link"> 编辑 </a-button>
                      <a-button v-if="record.status==1" type="link" @click="forbidden(record.row)" style="color: #F64646;"> 禁用 </a-button>
                      <a-button v-if="record.status==0" type="link" @click="enable(record.row)"> 启用 </a-button>
                        <a-button  @click="del(record)" type="link" style="color: #F64646;"> 删除 </a-button>
                    </template>
                </a-table>

            </div>
            <div class="text-right" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>

        <a-modal :title="title" v-model="visible" :maskClosable="false" :width="590" centered :footer="null">
            <div>
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }">
                    <a-form-model-item label="用户姓名" prop="userName">
                        <a-input v-model="form.userName" placeholder="请输入用户姓名" />
                    </a-form-model-item>
                    <a-form-model-item label="Email" prop="email">
                        <a-input v-model="form.email" placeholder="请输入邮箱" />
                    </a-form-model-item>
                    <a-form-model-item label="手机号" prop="phoneNumber">
                        <a-input v-model="form.phoneNumber" placeholder="请输入手机号" />
                    </a-form-model-item>
                    <a-form-model-item label="所属角色" prop="role">
                        <a-select v-model="form.role" placeholder="请选择" allowClear style="width:100%">
                            <a-select-option v-for="(item, index) in 2" :value="item" :key="index">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="所属组织" prop="organization">
                        <a-select v-model="form.organization" placeholder="请选择" allowClear style="width:100%">
                            <a-select-option v-for="(item, index) in 2" :value="item" :key="index">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                  <a-form-model-item label="状态" prop="status">
                    <a-switch v-model="form.status" />
                  </a-form-model-item>
                </a-form-model>
              <div class="flex align-center justify-center">
                <a-button @click="visible=false"
                          style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
                <a-button @click="submit"  type="primary">确定</a-button>
              </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {dataSource as ds} from "@/services";
const columns = [
    {
        title: '用户姓名',
        dataIndex: 'userName',
    },
    {
        title: 'Email',
        dataIndex: 'email',
    },
    {
        title: '手机号',
        dataIndex: 'phoneNumber',
    },
    {
        title: '所属角色',
        dataIndex: 'role',
    },
    {
        title: '所属组织',
        dataIndex: 'organization',
    },
    {
        title: '启用',
        dataIndex: 'status',
        scopedSlots: { customRender: 'status' },
    },
    {
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width: 240
    }
]
export default {
    name: "users",
    data() {
        return {
            columns,
            list: [],
            selectedRowKeys: [],

            searchForm: {
                page: 1,
              pageSize: 15
            },
            total: 20,
            visible: false,
            title: '添加用户',
            form: {
              userName: '',
              email: "",
              phoneNumber: "",
              status: true,
              role:undefined,
              organization:undefined
            },
            rules: {
              userName: [
                    { required: true, message: '请输入用户姓名', trigger: 'blur' },
                ],

              phoneNumber: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
                ],
              email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
              role: [
                    { required: true, message: '请选择所属角色', trigger: 'change' },
                ],
              organization: [
                    { required: true, message: '请选择所属组织', trigger: 'change' },
                ],
            }
        }
    },
  mounted() {
    this.getData();
  },
    methods: {
      //提交
      submit(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            console.log(this.form)
            if(this.title=='编辑组织'){

              ds.submitpost(this.form).then(res => {
                console.log(res);
                this.$message.success('提交成功')
                this.visible=false;
                this.getData()
              })
            }else {
              ds.submitpost(this.form).then(res => {
                console.log(res)
                this.$message.success('提交成功')
                this.visible=false;
                this.getData()
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      //重置密码
      resetPass(row){
        let that=this;
        this.$confirm({
          content: '是否确定重置密码',
          onOk() {
            ds.delpost({ id:row.id }).then(res => {
              console.log(res)
              that.$message.success('重置密码成功');
              that.getData();
            })
          }
        });
      },
      //禁用
      forbidden(row){
        let that=this;
        this.$confirm({
          content: '是否确定禁用',
          onOk() {
            ds.delpost({ id:row.id }).then(res => {
              console.log(res)
              that.$message.success('禁用成功');
              that.getData();
            })
          }
        });
      },
      //启用
      enable(row){
        let that=this;
        this.$confirm({
          content: '是否确定启用',
          onOk() {
            ds.delpost({ id:row.id }).then(res => {
              console.log(res)
              that.$message.success('启用成功');
              that.getData();
            })
          }
        });
      },
      //删除
      del(row){
        let that=this;
        this.$confirm({
          content: '是否确定删除',
          onOk() {
            ds.delpost({ id:row.id }).then(res => {
              console.log(res)
              that.$message.success('删除成功');
              that.getData();
            })
          }
        });
      },
      //搜索
      search(){
        this.searchForm.page=1;
        this.getData()
      },
      //重置
      reset(){
        this.searchForm={
          page: 1,
          pageSize: 15
        }
        this.getData()
      },
      getData() {
        // let data=this.searchForm;
        // console.log(data)
        // this.list=[]
        // ds.userList(data).then(res => {
        //   console.log(res)
        //   this.list = res.data.data.list
        //   this.total = res.data.data.total
        // })
      },
      handleOpen(row) {
        this.visible = true
        this.title = row ? '编辑用户' : '添加用户'
        if(row){
          this.form =Object.assign({}, row);
          console.log(this.form)
        }else {
          this.form={}
        }
      },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        showSizeChange(current, pageSize) {
            this.searchForm.pageSize = pageSize
          this.getData()
        },
        handlePageNo(current) {
            this.searchForm.page = current
          this.getData()
        },
    }
}
</script>
<style scoped lang="less">
.searchForm /deep/.ant-select-selection{
  color: #000 !important;
}
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-switch {
    background-color: #fff;
}

/deep/ .ant-switch-checked {
    background-color: #177ddc;
}

/deep/ .ant-switch-loading-icon,
/deep/.ant-switch::after {
    background-color: #42487A;
}
/deep/ .ant-btn-link{
    color: #DADDED ;
}
</style>
